ffrgb / meshviewer

  function (d3Selection, d3Force, d3Zoom, d3Drag, math, draw) {

    'use strict';

    return function (config, linkScale, sidebar, router) {

      let self = this;

      let el;

      let canvas;

      let ctx;

      let force;

      let forceLink;

      let transform = d3Zoom.zoomIdentity;

      let intNodes = [];

      let dictNodes = {};

      let intLinks = [];

      const NODE_RADIUS_DRAG = 10;

      const NODE_RADIUS_SELECT = 15;

      const LINK_RADIUS_SELECT = 12;

      const ZOOM_MIN = 1 / 4;

      const ZOOM_MAX = 3;

      const FORCE_ALPHA = 0.3;

      draw.setTransform(transform);

      function resizeCanvas() {

        canvas.width = el.offsetWidth;

        canvas.height = el.offsetHeight;

        canvas.style.width = el.offsetWidth + 'px';

        canvas.style.height = el.offsetHeight + 'px';

      }

      function moveTo(x, y) {

        transform.x = (canvas.width + sidebar()) / 2  - x * transform.k;

        transform.y =  canvas.height / 2              - y * transform.k;

      }

      function onClick() {

        if (d3Selection.event.defaultPrevented) {

          return;

        }

        let e = transform.invert([d3Selection.event.clientX, d3Selection.event.clientY]);

        let n = force.find(e[0], e[1], NODE_RADIUS_SELECT);

        if (n !== undefined) {

          router.node(n.o.node)();

          return;

        }

        e = {x: e[0], y: e[1]};

        let closedLink;

        let radius = LINK_RADIUS_SELECT;

        intLinks

          .forEach(function (d) {

            let distance = math.distanceLink(e, d.source, d.target);

            if (distance < radius) {

              closedLink = d;

              radius = distance;

            }

          });

        if (closedLink !== undefined) {

          router.link(closedLink.o)();

        }

      }

      function redraw() {

        ctx.save();

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.translate(transform.x, transform.y);

        ctx.scale(transform.k, transform.k);

        intLinks.forEach(draw.drawLink);

        intNodes.forEach(draw.drawNode);

        ctx.restore();

      }

      el = document.createElement('div');

      el.classList.add('graph');

      forceLink = d3Force.forceLink()

        .distance(function (d) {

          if (d.o.type === 'fastd' || d.o.type === 'L2TP') {

            return 0;

          }

          return 75;

        })

        .strength(function (d) {

          if (d.o.type === 'fastd' || d.o.type === 'L2TP') {

            return 0.02;

          }

          return Math.max(0.5, 1 / d.o.tq);

        });

      let zoom = d3Zoom.zoom()

        .scaleExtent([ZOOM_MIN, ZOOM_MAX])

      force = d3Force.forceSimulation()

        .force('link', forceLink)

        .force('charge', d3Force.forceManyBody())

        .on('tick', redraw)

        .alphaTarget(FORCE_ALPHA);

      let drag = d3Drag.drag()

        .subject(function () {

          let e = transform.invert([d3Selection.event.x, d3Selection.event.y]);

          let n = force.find(e[0], e[1], NODE_RADIUS_DRAG);

          if (n !== undefined) {

            n.x = d3Selection.event.x;

            n.y = d3Selection.event.y;

            return n;

          }

          return undefined;

        })

        .on('start', function () {

          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.subject.x);

          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.subject.y);

        })

        .on('drag', function () {

          d3Selection.event.subject.fx = transform.invertX(d3Selection.event.x);

          d3Selection.event.subject.fy = transform.invertY(d3Selection.event.y);

        })

        .on('end', function () {

          d3Selection.event.subject.fx = null;

          d3Selection.event.subject.fy = null;

        });

      canvas = d3Selection.select(el)

        .append('canvas')

        .on('click', onClick)

        .call(drag)

        .call(zoom)

        .node();

      ctx = canvas.getContext('2d');

      draw.setCTX(ctx);

      window.addEventListener('resize', function () {

        resizeCanvas();

        redraw();

      });

      self.setData = function setData(data) {

        intNodes = data.graph.nodes.map(function (d) {

          let e;

          if (d.id in dictNodes) {

            e = dictNodes[d.id];

          } else {

            e = {};

            dictNodes[d.id] = e;

          }

          e.o = d;

          return e;

        });

        intLinks = data.graph.links.map(function (d) {

          let e = {};

          e.o = d;

          e.source = dictNodes[d.source.id];

          e.target = dictNodes[d.target.id];

          e.color = linkScale(d.tq).hex();

          return e;

        });

        force.nodes(intNodes);

        forceLink.links(intLinks);

        force.restart();

        resizeCanvas();

      };

      self.resetView = function resetView() {

        draw.setHighlight(null);

        transform.k = (ZOOM_MIN + 1) / 2;

        moveTo( (canvas.width / 2) - sidebar(), canvas.height / 2);

        redraw();

      };

      self.gotoNode = function gotoNode(d) {

        draw.setHighlight({ type: 'node', o: d });

        for (let i = 0; i < intNodes.length; i++) {

          let n = intNodes[i];

          if ( n.o.node !== d) {

            continue;

          }

          transform.k = (ZOOM_MAX + 1) / 2;

          moveTo(n.x, n.y);

          break;

        }

        redraw();

      };

      self.gotoLink = function gotoLink(d) {

        draw.setHighlight({ type: 'link', o: d });

        for (let i = 0; i < intLinks.length; i++) {

          let l = intLinks[i];

          if ( l.o !== d) {

            continue;

          }

          moveTo( (l.source.x + l.target.x) / 2, (l.source.y + l.target.y) / 2);

          break;

        }

        redraw();

      };

      self.destroy = function destroy() {

        force.stop();

        canvas.remove();

        force = null;

        if (el.parentNode) {

          el.parentNode.removeChild(el);

        }

      };

      self.render = function render(d) {

        d.appendChild(el);

        resizeCanvas();

      };

      return self;

    };

  });